<template>
  <div class="">
    <el-dialog
      :title="title"
      :visible="isShowDialg"
      @close="btncalne"
    >
      <el-form ref="tableData" :model="tableData" label-width="120px" :rules="rules">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="tableData.username" style="width:50%" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="tableData.email" style="width:50%" />
        </el-form-item>
        <el-form-item v-if="title==='新增用户'" label="密码" prop="password">
          <el-input v-model="tableData.password" style="width:50%" />
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-input v-model="tableData.role" style="width:50%" />
        </el-form-item>
        <el-form-item label="权限组名称" prop="permission_group_id">
          <el-select v-model="tableData.permission_group_id" style="width:50%" placeholder="请选择" @change="changevalue">
            <el-option v-for="item in permissionlist" :key="item.id" :label="item.title" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="tableData.phone" style="width:50%" />
        </el-form-item>
        <el-form-item label="介绍" prop="introduction">
          <el-input v-model="tableData.introduction" style="width:50%" type="textarea" placeholder="Please input" />
        </el-form-item>
      </el-form>
      <!-- footer插槽 -->
      <template v-slot:footer>
        <el-row type="flex" justify="center">
          <el-col :span="6">
            <el-button size="small" @click="btncalne">取消</el-button>
            <el-button type="primary" size="small" @click="btnok">确定</el-button>
          </el-col>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { userdetails, permissions, adduser, deiteuser } from '@/api/user'

export default {
  components: {},
  props: {
    isShowDialg: {
      type: Boolean
    },
    title: {
      type: String
    }
  },
  data() {
    return {
      tableData: {
        introduction: '', // 介绍
        phone: '', // 联系电话
        permission_group_id: '',
        email: '', // 邮箱
        username: '', // 用户名
        role: '', // 角色
        password: '',
        avatar: ''
      },
      permissions: {
        page: 1,
        pagesize: 10
      },
      permissionlist: [], // 权限组
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        role: [{ message: '请输入角色', trigger: 'blur' }],
        phone: [{ message: '请输入联系电话', trigger: 'blur' }],
        introduction: [{ message: '请输入介绍', trigger: 'blur' }]
      },
      id: ''

    }
  },
  computed: {

  },

  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.permission(this.permissions)
  },

  // 方法集合
  methods: {
    // 下拉选择的值发生改变触发
    changevalue(value) {
      console.log(value, '888')
      this.tableData.permission_group_id = this.findpermission(value)
      this.$forceUpdate()
    },
    btncalne() {
      this.$refs.tableData.resetFields()
      this.tableData = {
        introduce: '', // 介绍
        mobile: '', // 联系电话
        permission_group_id: '',
        permission_group_title: '', // 权限组名称
        email: '', // 邮箱
        username: '', // 用户名
        operation: '', // 操作
        role: ''// 角色
      }
      this.$emit('update:isShowDialg', false)
    },
    // 用户详情
    async  userdetails(id) {
      // 获取当前用户进行数据回填
      const res = await userdetails(id)
      console.log(res, 'res**')
      const data = {
        introduction: res.introduction, // 介绍
        phone: res.phone, // 联系电话
        email: res.email, // 邮箱
        username: res.username, // 用户名
        role: res.role, // 角色
        avatar: ''
      }
      this.id = res.id// 当前用户id
      this.tableData = data
      this.tableData.permission_group_id = this.findpermission(res.permission_group_id)

      // console.log(this.tableData, '***')
    },
    // 确认
    btnok() {
      this.$refs.tableData.validate(async flag => {
        if (flag) {
          if (this.title === '编辑用户') {
            this.tableData.permission_group_id = this.findpermissiontitle(this.tableData.permission_group_id)
            await deiteuser(this.tableData, this.id)
          } else {
            // 新增
            this.tableData.permission_group_id = this.findpermissiontitle(this.tableData.permission_group_id)
            const addtabledata = {
              introduction: this.tableData.introduction, // 介绍
              phone: this.tableData.phone, // 联系电话
              permission_group_id: this.tableData.permission_group_id,
              email: this.tableData.email, // 邮箱
              username: this.tableData.username, // 用户名
              role: this.tableData.role, // 角色
              password: this.tableData.password,
              avatar: this.tableData.avatar
            }
            await adduser(addtabledata)
          }
          this.$emit('update:isShowDialg', false)

          // 重新获取数据
          this.$parent.Ulist({
            // 页码  每页几条
            page: 1,
            pagesize: 10
          })
          this.$message.success('操作成功')
        }
      })
    },
    // 获取权限组
    async permission(data) {
      const res = await permissions(data)
      this.permissionlist = res.list
      // console.log(res, '获取权限组')
    },
    // 查找对应的权限名称
    findpermission(id) {
      const qq = this.permissionlist.filter(item => {
        if (item.id === id) {
          return item
        }
      })
      // console.log(qq)
      return qq.length === 0 ? '' : qq[0].title
    },
    // 查找权限名称对应的id
    findpermissiontitle(id) {
      console.log(id, 'id')
      const qq = this.permissionlist.filter(item => {
        if (item.title === id) {
          return item
        }
      })
      return qq.length === 0 ? '' : qq[0].id
    }

  }
}
</script>
<style scoped lang="scss">
::v-deep .el-dialog__header{
    background-color: #409eff !important;

}
::v-deep .el-dialog__title,
::v-deep .el-dialog__headerbtn,
::v-deep .el-dialog__close {
    color: #fff;
}

</style>
